<template>
    <i :class="['iconfont', 'icon-chouma1', 'chip']">
        <span class="number">{{ number }}</span>
    </i>
</template>

<script setup>
import { ref, computed,onMounted } from 'vue'
import { chipEnum } from '../constants/enum.js'
import {gsap} from 'gsap'

const props = defineProps([
    'number',
])
const color = computed(() => {
    return chipEnum[props.number]
})
onMounted(()=>{
    gsap.from(".chip", { x:'100%',y:'-100%' });
})
</script>

<style scoped lang="less">
.chip {
    color: v-bind(color);
    font-size: .3rem;
    position: absolute;
    .number {
        position: absolute;
        color: #fff;
        font-size: .11rem;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}
</style>